<template>
  <div class="page">
    <div class="pageSet_top_wrap">
      <div
        class="top_item"
        @click="handleChange(index)"
        :class="{ active: current === index }"
        v-for="(item, index) in topList"
        :key="index"
      >
        <div class="title">{{ item.title }}</div>
        <!-- <div class="eng">{{ item.eng }}</div> -->
      </div>
    </div>
    <div class="detail_wrap">
      <pageSet v-if="current == 0"></pageSet>
      <display v-if="current == 1"></display>
      <bottom v-if="current == 2"></bottom>
      <!-- <screen v-if="current == 3"></screen> -->
    </div>
  </div>
</template>

<script>
import pageSet from "./pageChildren/pageSet";
import display from "./pageChildren/display";
import bottom from "./pageChildren/bottom";
// import screen from "./pageChildren/screen";
import { mapGetters } from "vuex";
import { LreItem, LsetItem } from "@/utils/storage";
export default {
  data() {
    return {
      topList: [
        {
          title: "页面设置",
          eng: "Page setup",
        },
        {
          title: "显示设置",
          eng: "Display setting",
        },
        {
          title: "底部设置",
          eng: "Bottom seting",
        },
        // {
        //   title: "现场大屏",
        //   eng: "Large screen on site",
        // },
      ],
    };
  },
  computed: {
    ...mapGetters("status", {
      current: "current",
    }),
  },
  components: {
    pageSet,
    bottom,
    display,
    // screen,
  },
  methods: {
    handleChange(index) {
      LsetItem("current", index);
      this.$store.commit("status/SET_CURRENT", index);
    },
  },
  destroyed() {
    LreItem("current");
    this.$store.commit("status/SET_CURRENT", 0);
  },
};
</script>


<style lang="scss" scoped>
.page {
  height: 100%;
  .pageSet_top_wrap {
    display: flex;
    .top_item {
      margin-right: 25px;
      cursor: pointer;
      color: rgb(191, 192, 196);
       padding-bottom: 10px;
      border-bottom: 2px solid transparent;
      &.active {
        color: $themeColor;
        border-bottom: 2px solid $themeColor;
      }
      .title {
        font-size: 18px;
        font-weight: 500;
      }
      .eng {
        font-size: 10px;
        font-weight: 500;
      }
    }
  }
  .detail_wrap {
    padding-top: 50px;
  }
}
</style>